<template>
  <div>
    <div class="body-left-Nav">
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            router>
            <el-menu-item index="home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="userInfo">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>个人信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="queryInfo">查看个人信息</el-menu-item>
                <el-menu-item index="queryBill">查看账单信息</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="changeInfo">
                <template slot="title">修改个人信息</template>
                <el-menu-item index="changeUserInfo">更新用户基本信息</el-menu-item>
                <el-menu-item index="changePassword">更新用户密码</el-menu-item>
                <el-menu-item index="changeEmail">更新用户电子邮箱</el-menu-item>
                <el-menu-item index="changePlate">更新用户车牌号码</el-menu-item>
              </el-submenu>
            </el-submenu>
            
            <el-submenu index="bill">
              <template slot="title">
                <i class="el-icon-wallet"></i>
                <span>用户账户操作</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="billRecharge">充值</el-menu-item>
                <el-menu-item index="billRefund">退费</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="plate">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>用户车牌操作</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="plateRecharge">车牌号钱包充值</el-menu-item>
                <el-menu-item index="plateRefund">车牌号钱包退费</el-menu-item>
                <el-menu-item index="plateBill">车牌号钱包消费查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
    </div>

    <div class="body-function">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
 methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
.body-left-Nav{
  width: 250px;
  background-color: #545c64;
  height: 935px;
  opacity: 0.9;
}
.body-function{
  position: absolute;
  width: 85%;
  height: 935px;
  top: 0px;
  right: 0px;
}
</style>